<%--
  Created by IntelliJ IDEA.
  User: hongcy
  Date: 16-3-20
  Time: 下午9:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ include file="/include/taglib.jsp" %>
<div style="padding:20px 0px;">
    <form method="post" action="${ctx}/mulanweb/admin/chartered/save" id="ff">
        <table cellspacing="5" style="margin: 0 auto">
            <tr>
                <td>服务者编号:</td>
                <td><input type="text" name="sellerId" class="easyui-textbox"
                           data-options="required:true,validType:{length:[1,15]}" style="width: 260px;"/></td>
            </tr>
            <tr>
                <td>类型:</td>
                <td><select id="add-type" class="easyui-combobox" style="width: 260px;">
                    <option value="8">全日包车</option>
                    <option value="9">计时包车</option>
                    <option value="10">接送机</option>
                    <option value="11">陪游</option>
                </select>
                    <input type="hidden" name="charteredType" id="charteredTypeId" value="8"/>
                </td>
            </tr>
            <tr>
                <td id="city-name">地点:</td>
                <td><input id="form-city" style="width: 260px;"/></td>
                <input type="hidden" name="cityId" id="cityId"/>
            </tr>
            <tr>
                <td>利润折扣:</td>
                <td><input type="text" name="profit" class="easyui-numberbox"
                           data-options="required:true,min:0,max:99,precision:0" style="width:260px"></td>
            </tr>
            <tr>
                <td>标题:</td>
                <td><input type="text" name="title" class="easyui-textbox"
                           data-options="required:true,valiType:{length:[1,20]}" style="width:260px"></td>
            </tr>
            <tr>
                <td>详情介绍:</td>
                <td><input type="text" name="description" class="easyui-textbox"
                           data-options="multiline:true,required:true,valiType:{length:[1,20]}"
                           style="width:260px;height:80px"/></td>
            </tr>
            <tr>
                <td>单价:</td>
                <td><input type="text" name="price" class="easyui-numberbox"
                           data-options="required:true,precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'￥',suffix:'元'"
                           style="width:200px"></td>
            </tr>
            <tr>
                <td>服务日期:</td>
                <td><select id="server-date-select" class="easyui-combobox" style="width: 260px;">
                    <option value="1">周一</option>
                    <option value="2">周二</option>
                    <option value="3">周三</option>
                    <option value="4">周四</option>
                    <option value="5">周五</option>
                    <option value="6">周六</option>
                    <option value="7">周日</option>
                </select>
                    <input type="hidden" name="serverTime" id="serverTime" value="1"/>
                </td>
            </tr>
            <tr>
                <td>服务时间:</td>
                <td><input id="start-server-time-select-h" style="width: 50px;"/>:
                    <input id="start-server-time-select-m" style="width: 50px;"/>
                    -
                    <input id="end-server-time-select-h" style="width: 50px;"/>:
                    <input id="end-server-time-select-m" style="width: 50px;"/>
                    <input type="hidden" name="startTime" id="startTime" value="0:0"/>
                    <input type="hidden" name="endTime" id="endTime" value="0:0"/>
                </td>
            </tr>
            <tr>
                <td>座位数:</td>
                <td><input type="text" name="receptionNumber" class="easyui-numberbox"
                           data-options="required:true,precision:0,suffix:'座'"
                           style="width:200px"></td>
            </tr>
            <tr>
                <td>车品牌:</td>
                <td><input type="text" id="carBrandSelect" style="width:200px"></td>
                <input type="hidden" name="carBrandId" id="carBrandId"/>
            </tr>
            <tr>
                <td>车牌号:</td>
                <td><input type="text" name="plateNumber"  class="easyui-textbox" style="width:200px" data-options="required:false"></td>
            </tr>
            <tr>
                <td colspan="2">logo图:<input id="logoImage" type="file" size="30" name="fileselect" multiple/>
                </td>
            </tr>
            <tr>
                <td colspan="2">轮播图:<input id="fileImage" type="file" size="30" name="fileselect" multiple/>
                </td>
            </tr>
            <button id="photoSubmit" type="button" style="display: none"></button>
        </table>
    </form>
        <div style="width:100%;height:auto;" id="preview"></div>
</div>
<script type="text/javascript">

    var params = {
        fileInput: $("#fileImage").get(0),
        upButton: $("#photoSubmit").get(0),
        url:$("#ff").attr("action"),
        filter: function (files) {
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    if (file.size >= 512000) {
                        alert('您这张"' + file.name + '"图片大小过大，应小于500k');
                    } else {
                        arrFiles.push(file);
                    }
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },
        onSelect: function (files) {
            var html = '', i = 0;
            $("#preview").html('<div class="upload_loading"></div>');
            var funAppendImage = function () {
                file = files[i];
                if (file) {
                    var reader = new FileReader()
                    reader.onload = function (e) {
                        html = html + '<div id="uploadList_' + i + '" style="float:left"><p>' +
                                '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a><br />' +
                                '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" width="80px" height="80px"/></p>' +
                                '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
                                '</div>';

                        i++;
                        funAppendImage();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $("#preview").html(html);
                    if (html) {
                        //删除方法
                        $(".upload_delete").click(function () {
                            ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                            return false;
                        });
                        //提交按钮显示
                        $("#fileSubmit").show();
                    } else {
                        //提交按钮隐藏
                        $("#fileSubmit").hide();
                    }
                }
            };
            funAppendImage();
        },
        onDelete: function (file) {
            $("#uploadList_" + file.index).fadeOut();
        },
        onDragOver: function () {
            $(this).addClass("upload_drag_hover");
        },
        onDragLeave: function () {
            $(this).removeClass("upload_drag_hover");
        },
        onProgress: function (file, loaded, total) {
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.show().html(percent);
        },
        onSuccess: function (file, response) {
            $("#datagrid").datagrid("reload");
            $dialog.dialog("close");
            $("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
        },
        onFailure: function (file) {
            $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
            $("#uploadImage_" + file.index).css("opacity", 0.2);
        },
        onComplete: function () {
            //提交按钮隐藏
            $("#fileSubmit").hide();
            //file控件value置空
            $("#fileImage").val("");
            $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
        }
    };
    ZXXFILE = $.extend(ZXXFILE, params);
    ZXXFILE.init();

    var params1 = {
        fileInput: $("#logoImage").get(0),
        upButton: $("#photoSubmit").get(0),
        url:$("#ff").attr("action"),
        filter: function (files) {
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    if (file.size >= 512000) {
                        alert('您这张"' + file.name + '"图片大小过大，应小于500k');
                    } else {
                        arrFiles.push(file);
                    }
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },
        onSelect: function (files) {
            var html = '', i = 0;
            $("#preview").html('<div class="upload_loading"></div>');
            var funAppendImage = function () {
                file = files[i];
                console.info(file);
                if (file) {
                    var reader = new FileReader()
                    reader.onload = function (e) {
                        html = html + '<div id="uploadList_' + i + '" style="float:left"><p>' +
                                '<a href="javascript:" class="upload_delete" title="删除" data-index="' + i + '">删除</a><br />' +
                                '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" width="80px" height="80px"/></p>' +
                                '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
                                '</div>';
                        i++;
                        funAppendImage();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $("#preview").html(html);
                    if (html) {
                        //删除方法
                        $(".upload_delete").click(function () {
                            ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                            return false;
                        });
                        //提交按钮显示
                        $("#fileSubmit").show();
                    } else {
                        //提交按钮隐藏
                        $("#fileSubmit").hide();
                    }
                }
            };
            funAppendImage();
        },
        onDelete: function (file) {
            $("#uploadList_" + file.index).fadeOut();
        },
        onDragOver: function () {
            $(this).addClass("upload_drag_hover");
        },
        onDragLeave: function () {
            $(this).removeClass("upload_drag_hover");
        },
        onProgress: function (file, loaded, total) {
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.show().html(percent);
        },
        onSuccess: function (file, response) {
            $("#datagrid").datagrid("reload");
            $dialog.dialog("close");
            $("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
        },
        onFailure: function (file) {
            $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
            $("#uploadImage_" + file.index).css("opacity", 0.2);
        },
        onComplete: function () {
            //提交按钮隐藏
            $("#fileSubmit").hide();
            //file控件value置空
            $("#fileImage").val("");
            $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
        }
    };
    ZXXFILE = $.extend(ZXXFILE, params1);
    ZXXFILE.init();


    $(function () {
        $("#form-city").combobox({
            required: true,
            url: '${ctx}/mulanweb/common/city/search',
            panelHeight: 200,
            valueField: 'Id',
            textField: 'NameCn',
            editable: false,
            queryParams: {
                PageSize: 100,
                PageNumber: 1
            },
            onChange: function (newV, oldV) {
                $("#cityId").val(newV);
            },
            loadFilter: function (data) {
                var result = [];
                var currentSize = data.PageSize;
                var totalSize = data.TotalRow;
                if (data.ReturnCode == 1 && currentSize >= totalSize) {
                    if (data.DataList.length > 0) {
                        for (var tt = 0; tt < data.DataList.length; tt++) {
                            result.push({Id: data.DataList[tt].Id, NameCn: data.DataList[tt].NameCn});
                        }
                    }
                } else {
                    Constant.showMessage("地点信息已超过最大值");
                }
                return result;
            }
        });
        $("#server-date-select").combobox({multiple:true});
        var hour = [] ;
        for(var i = 0 ; i<24 ; i++){
            hour.push({'value':i,text:i+""});
        }
        var minute = [] ;
        for(var i = 0 ; i<60 ; i++){
            minute.push({'value':i,text:i+""});
        }
        $("#start-server-time-select-h,#end-server-time-select-h").combobox({
            required:true,
            valueField:'value',
            textField:'text',
            editable:false,
            data:hour,
            onChange:checkup
        });
        $("#start-server-time-select-m,#end-server-time-select-m").combobox({
            required:true,
            valueField:'value',
            textField:'text',
            editable:false,
            data:minute,
            onChange:checkup
        });
        $("#carBrandSelect").combobox({
            required:false,
            valueField:'Id',
            textField:'Name',
            editable:true,
            url:'${ctx}/mulanweb/admin/car_brand/search',
            loadFilter:function(data){
                var para = data.DataList;
                return para ;
            },
            onChange:function(newV,oldV){
                $("#carBrandId").val(newV);
            }
        });
        $("#server-date-select").combobox({
            onChange:function(newV,oldV){
                $("#serverTime").val(newV.join(","));
            }
        });
        $("#add-type").combobox({
            onChange:function(n,o){
                $("#charteredTypeId").val(n);
            }
        });
        function checkup(newV,oldV){
            var startHouse = $("#start-server-time-select-h").combo("getValue");
            var endHouse = $("#end-server-time-select-h").combo("getValue");
            var startMinute= $("#start-server-time-select-m").combo("getValue");
            var endMinute = $("#end-server-time-select-m").combo("getValue");
            if(startHouse && startMinute){
                $("#startTime").val(startHouse+":"+startMinute+":00");
            }else if(startHouse){
                $("#startTime").val(startHouse+":00:00");
            }else if(startMinute){
                $("#startTime").val("00:"+startMinute+":00");
            }
            if(endHouse && endMinute){
                $("#endTime").val(endHouse+":"+endMinute+":00");
            }else if(endHouse){
                $("#endTime").val(endHouse+":00:00");
            }else if(endMinute){
                $("#endTime").val("00:"+endMinute+":00");
            }

            /*if(startHouse == endHouse){
                if(startMinute>endMinute){
                    Constant.showMessage("您的结束时间大于开始时间，时间无效")
                }
            }else if(startHouse > endHouse){
                Constant.showMessage("您的结束时间大于开始时间，时间无效")
            }*/
        }

    })
</script>
